<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品设计思维分析结果</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#8b5cf6',
                        neutral: '#64748b',
                        light: '#f1f5f9',
                        dark: '#1e293b'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-10 top-0">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="/" class="flex-shrink-0 flex items-center">
                        <i class="fa fa-lightbulb-o text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-gray-800">产品设计思维分析系统</span>
                    </a>
                </div>
                <div class="flex items-center">
                    <a href="/history" class="p-2 rounded-md text-gray-600 hover:text-primary hover:bg-blue-50 transition-colors mr-4">
                        <i class="fa fa-history mr-1"></i> 历史记录
                    </a>
                    <a href="/" class="p-2 rounded-md text-gray-600 hover:text-primary hover:bg-blue-50 transition-colors">
                        <i class="fa fa-upload mr-1"></i> 新分析
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
        <!-- 分析基本信息 -->
        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
            <div class="flex flex-col md:flex-row md:items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 mb-2">产品设计思维分析结果</h1>
                    <p class="text-gray-600">
                        <span class="mr-4"><i class="fa fa-file-video-o text-primary mr-1"></i> 视频文件: {{ record.filename }}</span>
                        <span><i class="fa fa-clock-o text-gray-500 mr-1"></i> 分析时间: {{ record.upload_time.strftime('%Y-%m-%d %H:%M') }}</span>
                    </p>
                </div>
                <div class="mt-4 md:mt-0 flex space-x-3">
                    <a href="/export_analysis/{{ record.id }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary transition-colors">
                        <i class="fa fa-download mr-2"></i> 导出Excel
                    </a>
                    <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors">
                        <i class="fa fa-plus mr-2"></i> 新分析
                    </a>
                </div>
            </div>
            <div class="mt-4">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ 'green' if record.status == 'completed' else 'red' }}-100 text-{{ 'green' if record.status == 'completed' else 'red' }}-800">
                    {{ '分析完成' if record.status == 'completed' else '分析失败' }}
                </span>
                <span class="ml-3 text-sm text-gray-500">分析ID: {{ record.id }}</span>
            </div>
        </div>

        <!-- 加载状态 -->
        <div id="loading-state" class="text-center py-16">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
            <h3 class="text-lg font-medium text-gray-700">正在加载分析结果...</h3>
            <p class="text-gray-500 mt-2">请稍候，我们正在准备产品设计思维分析报告</p>
        </div>

        <!-- 错误状态 -->
        <div id="error-state" class="hidden bg-red-50 border border-red-200 rounded-lg p-6 text-center">
            <i class="fa fa-exclamation-circle text-red-500 text-4xl mb-4"></i>
            <h3 class="text-lg font-medium text-red-800 mb-2">分析失败</h3>
            <p class="text-red-700 mb-4" id="error-message">无法完成分析，请重试</p>
            <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 transition-colors">
                <i class="fa fa-refresh mr-2"></i> 重新分析
            </a>
        </div>

        <!-- 分析结果区域 -->
        <div id="results-container" class="hidden">
            <!-- 核心学习点 -->
            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 mb-8 border border-blue-100">
                <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fa fa-star text-yellow-500 mr-2"></i> 核心学习点
                </h2>
                <div class="text-lg text-gray-700" id="key-lessons">
                    <!-- 核心学习点将在这里显示 -->
                </div>
            </div>

            <!-- 设计思维框架 -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8 card-hover">
                <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                    <i class="fa fa-sitemap text-primary mr-2"></i> 设计思维框架
                </h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">产品定位</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="product-positioning">
                            <!-- 产品定位将在这里显示 -->
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">目标用户分层</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="target-users">
                            <!-- 目标用户分层将在这里显示 -->
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">用户问题拆解逻辑</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="user-problem-decomposition">
                            <!-- 用户问题拆解逻辑将在这里显示 -->
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">场景优先级策略</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="scene-priority-logic">
                            <!-- 场景优先级策略将在这里显示 -->
                        </div>
                    </div>
                    <div class="md:col-span-2">
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">技术与体验平衡思路</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="tech-experience-balance">
                            <!-- 技术与体验平衡思路将在这里显示 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 具体设计内容 -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8 card-hover">
                <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                    <i class="fa fa-cubes text-secondary mr-2"></i> 具体设计内容
                </h2>
                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">功能模块结构</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="function-module-structure">
                            <!-- 功能模块结构将在这里显示 -->
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">核心交互流程</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="interaction-design-flow">
                            <!-- 核心交互流程将在这里显示 -->
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">视觉设计规范</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="visual-design-spec">
                            <!-- 视觉设计规范将在这里显示 -->
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">数据流转设计</h3>
                        <div class="bg-gray-50 p-4 rounded-lg text-gray-600" id="data-flow-design">
                            <!-- 数据流转设计将在这里显示 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 可复用设计策略 -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8 card-hover">
                <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                    <i class="fa fa-lightbulb-o text-accent mr-2"></i> 可复用设计策略
                </h2>
                <div class="grid md:grid-cols-2 gap-6" id="reusable-strategies-container">
                    <!-- 可复用设计策略将在这里显示 -->
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <p class="text-gray-400">© 2023 产品设计思维分析系统 | 助力产品经理快速成长</p>
            </div>
        </div>
    </footer>

    <script>
        // 获取分析ID
        const analysisId = "{{ record.id }}";
        
        // 页面加载完成后获取分析结果
        document.addEventListener('DOMContentLoaded', function() {
            fetch(`/get_result/${analysisId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取分析结果失败');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.status === 'completed' && data.result) {
                        // 隐藏加载状态，显示结果
                        document.getElementById('loading-state').classList.add('hidden');
                        document.getElementById('results-container').classList.remove('hidden');
                        
                        // 填充结果数据
                        populateResults(data.result);
                    } else {
                        // 显示错误状态
                        document.getElementById('loading-state').classList.add('hidden');
                        document.getElementById('error-state').classList.remove('hidden');
                        document.getElementById('error-message').textContent = data.message || '分析尚未完成或失败';
                    }
                })
                .catch(error => {
                    // 显示错误状态
                    document.getElementById('loading-state').classList.add('hidden');
                    document.getElementById('error-state').classList.remove('hidden');
                    document.getElementById('error-message').textContent = error.message;
                });
        });
        
        // 填充分析结果
        function populateResults(result) {
            // 核心学习点
            document.getElementById('key-lessons').textContent = result.key_lessons || '未识别到核心学习点';
            
            // 设计思维框架
            document.getElementById('product-positioning').textContent = 
                result.design_thinking_framework?.product_positioning || '未识别到';
            document.getElementById('target-users').textContent = 
                result.design_thinking_framework?.target_users || '未识别到';
            document.getElementById('user-problem-decomposition').textContent = 
                result.design_thinking_framework?.user_problem_decomposition || '未识别到';
            document.getElementById('scene-priority-logic').textContent = 
                result.design_thinking_framework?.scene_priority_logic || '未识别到';
            document.getElementById('tech-experience-balance').textContent = 
                result.design_thinking_framework?.tech_experience_balance || '未识别到';
            
            // 具体设计内容
            document.getElementById('function-module-structure').textContent = 
                result.concrete_design_content?.function_module_structure || '未识别到';
            document.getElementById('interaction-design-flow').textContent = 
                result.concrete_design_content?.interaction_design_flow || '未识别到';
            document.getElementById('visual-design-spec').textContent = 
                result.concrete_design_content?.visual_design_spec || '未识别到';
            document.getElementById('data-flow-design').textContent = 
                result.concrete_design_content?.data_flow_design || '未识别到';
            
            // 可复用设计策略
            const strategiesContainer = document.getElementById('reusable-strategies-container');
            strategiesContainer.innerHTML = '';
            
            if (result.reusable_design_strategies && result.reusable_design_strategies.length > 0) {
                result.reusable_design_strategies.forEach(strategy => {
                    const strategyCard = document.createElement('div');
                    strategyCard.className = 'bg-gray-50 p-5 rounded-lg border border-gray-100';
                    
                    strategyCard.innerHTML = `
                        <h3 class="text-lg font-semibold text-gray-700 mb-3">${strategy.strategy_name || '未命名策略'}</h3>
                        <div class="mb-3">
                            <h4 class="font-medium text-gray-600 mb-1">具体内容：</h4>
                            <p class="text-gray-600 text-sm">${strategy.concrete_content || '未识别到'}</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-600 mb-1">适用场景：</h4>
                            <p class="text-gray-600 text-sm">${strategy.applicable_scenario || '未识别到'}</p>
                        </div>
                    `;
                    
                    strategiesContainer.appendChild(strategyCard);
                });
            } else {
                strategiesContainer.innerHTML = `
                    <div class="md:col-span-2 text-center py-8 text-gray-500">
                        <i class="fa fa-info-circle text-2xl mb-2"></i>
                        <p>未识别到可复用的设计策略</p>
                    </div>
                `;
            }
        }
    </script>
</body>
</html>
    